<template>
  <Row>
    <Col span="23" offset="1">
      <h2>专业题库</h2>
      <div class="main">
        <div class="resourcePanel">
          <div class="resourcePanel" style="margin-top: 25px">
            <Row style="height: 100%; overflow-y: auto">
              <template>
                <Col span="23" offset="0">
                  <Card class="symbols_type_max">
                    <el-col
                      :span="6"
                      v-for="(item, index) in questionBank"
                      :key="index.id"
                    >
                      <Card
                        style="
                          height: 250px;
                          width: 300px;
                          margin-left: 20px;
                          margin-top: 10px;
                        "
                      >
                        <span slot="title">
                          <Icon type="ios-pricetags"></Icon>{{ item.name }}</span
                        >
                        <span
                          slot="title"
                          style="
                            margin-left: 80px;
                            margin-right: 3px;
                            cursor: pointer;
                            color: gray;
                          "
                          title="Preview"
                          @click="previewQuestionBank(index, questionBank)"
                        >
                          <Icon type="ios-eye" :size="20" />
                        </span>
                        <div
                          class="operate"
                          slot="extra"
                          style="display: flex; align-items: center"
                        ></div>

                        <div style="display: flex; align-items: center; height: 10px">
                          <strong style="text-align: center; min-width: 45px"
                            >简介：</strong
                          >

                          <p
                            style="
                              overflow: hidden;
                              white-space: nowrap;
                              text-overflow: ellipsis;
                            "
                            :title="item.references"
                          >
                            {{ item.references }}
                          </p>
                        </div>
                        <br />
                        <div style="background-color: antiquewhite;height:100px">
                          <div v-if="item.fillInBlankList.length > 0">
                            <p style="margin-left: 10px">
                              填空题:{{ item.fillInBlankList.length }}道
                            </p>
                          </div>
                          <div v-if="item.judgementList.length > 0">
                            <p style="margin-left: 10px">
                              判断题:{{ item.judgementList.length }}道
                            </p>
                          </div>
                          <div v-if="item.multiSelectList.length > 0">
                            <p style="margin-left: 10px">
                              多选题:{{ item.multiSelectList.length }}道
                            </p>
                          </div>
                          <div v-if="item.quesAndAnswerList.length > 0">
                            <p style="margin-left: 10px">
                              简答题:{{ item.quesAndAnswerList.length }}道
                            </p>
                          </div>
                          <div v-if="item.singleSelectList.length > 0">
                            <p style="margin-left: 10px">
                              单选题:{{ item.singleSelectList.length }}道
                            </p>
                          </div>
                        </div>
                        <br />
                        <div>
                          <p style="margin-left: 150px;">
                            <Icon type="ios-person"></Icon>创建者：{{ item.creatorId }}
                          </p>
                        </div>
                      </Card>
                    </el-col>
                  </Card>
                </Col>
              </template>
            </Row>
          </div>
          <div
            class="resourcePanel"
            style="display: flex; justify-content: center; margin-top: 10px"
          >
            <Page
              :total="dataCount"
              :page-size="pageSize"
              :current="currentPage"
              show-total
              @on-change="changepage"
              show-elevator
            />
          </div>
        </div>
      </div>
    </Col>
  </Row>
</template>
<script>
import { get, post, del, put } from "@/axios";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 8,
      questionBank: [],
    };
  },
  mounted() {
    this.browseQuestionBank();
  },
  methods: {
    async changepage() {
      let size = 8;
      let page = this.currentPage;
      try {
        let res = await get(
          "/visualResourceLibrary/questionnaire/quesBank/" + page + "/" + size
        );
        // console.log(res.data.data);
        this.dataCount = res.data.data.total;
        this.questionBank = res.data.data.content;
        // console.log(this.questionBank);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    previewQuestionBank(index) {
      this.$router.push({
        path: "/previewQuestions",
        query: { value: this.questionBank[index].id },
      });
    },
    async browseQuestionBank() {
      let page = 0;
      let size = 10;
      try {
        let res = await get(
          "/visualResourceLibrary/questionnaire/quesBank/" + page + "/" + size
        );
        // console.log(res.data.data);
        this.dataCount = res.data.data.total;
        this.questionBank = res.data.data.content;
        // console.log(this.questionBank);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
  },
};
</script>

<style>
.main {
  display: flex;
}
.resourcePanel {
  flex: 1;
}
.symbols_type_max {
  height: 71vh;
  min-height: 420px;
  overflow-y: auto;
}
.projectTitle {
  height: 16px;
  line-height: 15px;
  font-size: 16px;
  max-width: 150px;
  padding-left: 5px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardicon {
  height: 15px;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
</style>
